<template>
  <view class="food-luck-container">
    <!-- 顶部导航栏 -->
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">创建组局</view>
      </view>
    </view>
    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 饭局人数 -->
      <view class="form-section">
        <view class="section-title">饭局人数</view>
        <view class="option-group">
          <view v-for="(option, index) in peopleOptions" :key="index"
            :class="['option-item', { 'selected': selectedPeople === option.value }]"
            @click="selectPeople(option.value)">
            {{ option.label }}
          </view>
        </view>
      </view>

      <!-- 菜品数量 -->
      <view class="form-section">
        <view class="section-title">菜品数量</view>
        <view class="stepper-container">
          <view class="stepper">
            <view class="stepper-btn" @click="decreaseDishes">
              <text class="stepper-icon">-</text>
            </view>
            <view class="stepper-value">{{ dishCount }}</view>
            <view class="stepper-btn" @click="increaseDishes">
              <text class="stepper-icon">+</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 菜品偏好 -->
      <view class="form-section">
        <view class="section-title">菜品偏好</view>
        <view class="option-group">
          <view v-for="(option, index) in cuisineOptions" :key="index"
            :class="['option-item', { 'selected': selectedCuisine === option.value }]"
            @click="selectCuisine(option.value)">
            {{ option.label }}
          </view>
        </view>
      </view>

      <!-- 聚餐日期 -->
      <view class="form-section">
        <view class="section-title">聚餐日期</view>
        <view class="date-time-group">
          <view class="date-input" @tap="showDatePicker = true">
            <text class="placeholder-text">{{ selectedDate || '请选择日期' }}</text>
            <image src="/static/calendar-icon.png" class="calendar-icon" />
          </view>
        </view>
      </view>
    </view>

    <!-- 创建饭局按钮 -->
    <view class="submit-button-container">
      <view 
        :class="['submit-button', { 'disabled': isSubmitting }]" 
        @click="submitForm"
      >
        <text v-if="!isSubmitting">创建饭局</text>
        <view v-else class="loading-content">
          <view class="loading-spinner"></view>
          <text class="loading-text">您的组局正在创建中，请耐心等待...</text>
        </view>
      </view>
    </view>

    <tn-picker v-model="showDatePicker" mode="time" @confirm="onDatePickerConfirm" :defaultDate="defaultDate">
    </tn-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      selectedPeople: '2', // 选中的饭局人数
      selectedCuisine: '川湘菜', // 选中的菜品偏好
      selectedDate: '', // 选中的日期
      selectedTime: '', // 选中的时间
      showDatePicker: false,
      defaultDate: '', // 默认日期
      isSubmitting: false, // 提交状态
      peopleOptions: [
        { label: '2人', value: '2' },
        { label: '4人', value: '4' },
        { label: '5-8人', value: '5-8' },
        { label: '10人以上', value: '10+' }
      ],
      cuisineOptions: [
        { label: '川湘菜', value: '川湘菜' },
        { label: '东北菜', value: '东北菜' },
        { label: '江浙菜', value: '江浙菜' },
        { label: '粤菜', value: '粤菜' }
      ],
      dishCount: 1 // 菜品数量计数器
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);
  },
  onUnload() {
    // 页面销毁时清理加载状态
    if (this.isSubmitting) {
      uni.hideLoading();
    }
  },
  onHide() {
    // 页面隐藏时清理加载状态
    if (this.isSubmitting) {
      uni.hideLoading();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectPeople(value) {
      this.selectedPeople = value;
    },
    selectCuisine(value) {
      this.selectedCuisine = value;
    },
    onDatePickerConfirm(e) {
      if (e && e.value) {
        this.selectedDate = e.value;
      } else if (e && typeof e === 'string') {
        this.selectedDate = e;
      } else if (e && e.year && e.month && e.day) {
        const year = e.year;
        const month = String(e.month).padStart(2, '0');
        const day = String(e.day).padStart(2, '0');
        this.selectedDate = `${year}-${month}-${day}`;
      }
      this.showDatePicker = false;
    },
    showTimePicker() {
      uni.showTimePicker({
        success: (res) => {
          this.selectedTime = res.time;
        }
      });
    },
    increaseDishes() {
      if (this.dishCount < 20) { // 最大值为10
        this.dishCount++;
      }
    },
    decreaseDishes() {
      if (this.dishCount > 1) { // 最小值为1
        this.dishCount--;
      }
    },
    submitForm() {
      // 防止重复提交
      if (this.isSubmitting) {
        return;
      }

      // 验证必填字段
      if (!this.selectedDate) {
        uni.showToast({
          title: '请选择聚餐日期',
          icon: 'none'
        });
        return;
      }
      
      // 获取用户信息
      const userInfo = uni.getStorageSync('userInfo') || {};
      const userid = userInfo?.data?.userid || userInfo?.userid || '';
      
      // 设置提交状态
      this.isSubmitting = true;
      
      // 显示加载提示
      // uni.showLoading({
      //   title: '组局创建中，请耐心等待',
      //   mask: true
      // });
      
      // 准备请求参数
      const formData = {
        userid: userid,
        usernum: this.selectedPeople,
        dishnum: this.dishCount, // 使用 dishCount
        dishtype: this.selectedCuisine,
        partytime: this.selectedDate
      };

      // 调用创建饭局接口
      this.$Request.postApi("/bot/api/agentcsaveuserparty", formData)
        .then(res => {
          uni.hideLoading();
          this.isSubmitting = false;
          
          if (res.status === 1) {
            uni.showToast({
              title: '创建成功',
              icon: 'success',
              duration: 1500
            });
            let createPartyid = res.data.id;
            
            // 创建成功后跳转到当前饭局页面
            setTimeout(() => {
              uni.navigateTo({
                url: `/activityPages/currentForm?id=${createPartyid}`
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.message || '创建失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
        .catch(err => {
          uni.hideLoading();
          this.isSubmitting = false;
          console.error('创建饭局失败:', err);
          
          uni.showToast({
            title: '网络请求失败，请重试',
            icon: 'none',
            duration: 2000
          });
        });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.food-luck-container {
  padding-bottom: 40rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .nav-back-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
      color: #000000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.status-height-color {
  background-color: #ffffff;
}

.form-container {
  padding: 30rpx;
  margin-top: 20rpx;
}

.form-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2263EC;
  margin-bottom: 20rpx;
}

.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.option-item {
  padding: 16rpx 32rpx;
  border-radius: 22rpx;
  font-size: 28rpx;
  background: #EFF4FF;
  color: #333;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;

  &.selected {
    background: #EFF4FF;
    color: #2263EC;
    border: 2rpx solid #2263EC;
  }
}

.stepper-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stepper {
  display: flex;
  align-items: center;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f5f5f5;
}

.stepper-btn {
  width: 80rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  border: 1rpx solid #e0e0e0;
  transition: background-color 0.2s ease;

  &:active {
    background-color: #e0e0e0;
  }
}

.stepper-value {
  width: 100rpx;
  height: 60rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  border: 1rpx solid #e0e0e0;
  border-left: none;
  border-right: none;
}

.stepper-icon {
  font-size: 32rpx;
  font-weight: bold;
}

.date-time-group {
  display: flex;
  gap: 20rpx;
}

.date-input,
.time-input {
  flex: 1;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.placeholder-text {
  font-size: 28rpx;
  color: #999;
}

.calendar-icon,
.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

.submit-button-container {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  padding: 0 30rpx;
}

.submit-button {
  min-width: 200rpx;
  max-width: 500rpx;
  padding: 0 40rpx;
  height: 88rpx;
  background-color: #2263EC;
  color: white;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(34, 99, 236, 0.3);
  white-space: nowrap;
  
  &.disabled {
    background-color: #cccccc;
    color: #999999;
    box-shadow: none;
    cursor: not-allowed;
  }
}

.loading-content {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.loading-spinner {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 26rpx;
  color: #999999;
}
</style>